<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./css/DOM练习 新.css">
</head>
<body>
    <div class="box">
        <div class="title"></div>
        <div class="con"></div>
    </div>
        <script src="./js/data.js"></script>
        <script>
            var tits=document.querySelector('.title')
            var cons=document.querySelector('.con')
            var index=0;
            tits.innerHTML= data.map(function(obj,n){
                return `<span class='${index===n?'active':''}'>${obj.tit}</span>`
            }).join('')
            cons.innerHTML=data.map(function(obj1,i){
                return `<div class='${index===i?'show':''}'>
                    ${obj1.con.map(function(item){
                        if(typeof item==='string'){
                            return `<p>${item}</p>`
                        }else{
                            return `<dl>
                                        <dt><img src='${item.src}'></dt>
                                        <dd>${item.des}</dd>
                                    </dl>
                                    `
                        }
                    }).join('')
                    }
                    </div>`
            }).join('')
            var title=tits.querySelectorAll('span')
            var con=cons.querySelectorAll('div')
            title.forEach(function(span,i){
                span.onclick=function(){
                    document.querySelector('.active').classList.remove('active')
                    document.querySelector('.show').classList.remove('show')
                    span.classList.add("active")
                    con[i].classList.add('show')
                }
            })
           

        </script>
</body>
</html>